<template>
      <!-- 新契约工作列表模块-end单 -->
  <div class="fillcontain">
    <!-- 标题 -->
    <bt-col-header title="规则组版本比较"></bt-col-header>
    <div class="page-content">
      <div class="fastQuery bgfff">
        <el-row>
          <el-col :span="6" class="fastQuery_title">
            <i class="el-icon-tickets"></i><span>规则组比较</span>
            <i class="el-icon-info"></i>
          </el-col>
        </el-row>
      </div>
      <!-- 查询表单 -->

      <div class="contain">
        <!-- 查询表单 -->
        <el-form
          :model="searchParams"
          ref="ruleForm"
          label-width="120px"
          class="search_container"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="规则组" prop="flowIdentify">
                <el-select
                  clearable
                  :filterable="true"
                  v-model="searchParams.groupIdentify"
                  @change="changeHandle"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in groups"
                    :key="i"
                    :label="item.groupName"
                    :value="item.groupIdentify"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="对比版本1" prop="sourceVersion">
                <el-select
                  clearable
                  v-model="searchParams.sourceVersion"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in versions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="targetVersion" label="对比版本2">
                <el-select
                  clearable
                  v-model="searchParams.targetVersion"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in versions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="text_center">
              <el-button
                :plain="true" 
                type="info"
                @click="compare"
                >开始对比</el-button
              >
            </el-col>
          </el-row>
        </el-form>
        <div class="con-title">
          <p>比较信息</p>
        </div>
        <el-table
          border
          :data="sourceTargetTables"
          style="width: 100%"
          :show-header="false"
        >
          <el-table-column align="center" prop="source"> </el-table-column>
          <el-table-column align="center" prop="target"> </el-table-column>
        </el-table>
        <div class="table-title" style="margin-top: 20px">
          <div class="left">
            <p>版本：{{dbbb1}}</p>
          </div>
        </div>
        <div class="contain">
          <el-table :data="tableDatas" border>
            <el-table-column
              v-for="(col, i) in conditionList"
              :property="col.decisionCode"
              :key="col.decisionCode"
              :index="i"
              align='center'    
              :label="col.conditionDesc"
            >
              <template slot="header" slot-scope="scope">
                <el-tooltip
                  v-if="
                    conditionList[scope.column.index] &&
                    conditionList[scope.column.index].headType == '0'
                  "
                  class="item"
                  effect="dark"
                  :content="scope.column.label"
                  placement="top"
                >
                  <span> {{ scope.column.label }} </span>
                </el-tooltip>
                <el-tooltip
                  v-if="
                    conditionList[scope.column.index] &&
                    conditionList[scope.column.index].headType == '1'
                  "
                  class="item"
                  effect="dark"
                  :content="scope.column.label + '(条件)'"
                  placement="top"
                >
                  <span> {{ scope.column.label }} (条件) </span>
                </el-tooltip>
                <el-tooltip
                  v-if="
                    conditionList[scope.column.index] &&
                    conditionList[scope.column.index].headType == '2'
                  "
                  class="item"
                  effect="dark"
                  :content="scope.column.label + '(动作)'"
                  placement="top"
                >
                  <span> {{ scope.column.label }} (动作) </span>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <div v-if="scope.row[scope.column.property]">
                  {{ scope.row[scope.column.property].conditionDesc }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="table-title" style="margin-top: 20px">
          <div class="left">
            <p>版本：{{dbbb2}}</p>
          </div>
        </div>
        <div class="contain">
          <el-table :data="tableDatas2" border>
            <el-table-column
              v-for="(col, i) in conditionList2"
              :property="col.decisionCode"
              :key="col.decisionCode"
              :index="i"
              align='center'    
              :label="col.conditionDesc"
            >
              <template slot="header" slot-scope="scope">
                <el-tooltip
                  v-if="
                    conditionList2[scope.column.index] &&
                    conditionList2[scope.column.index].headType == '0'
                  "
                  class="item"
                  effect="dark"
                  :content="scope.column.label"
                  placement="top"
                >
                  <span> {{ scope.column.label }} </span>
                </el-tooltip>
                <el-tooltip
                  v-if="
                    conditionList2[scope.column.index] &&
                    conditionList2[scope.column.index].headType == '1'
                  "
                  class="item"
                  effect="dark"
                  :content="scope.column.label + '(条件)'"
                  placement="top"
                >
                  <span> {{ scope.column.label }} (条件) </span>
                </el-tooltip>
                <el-tooltip
                  v-if="
                    conditionList2[scope.column.index] &&
                    conditionList2[scope.column.index].headType == '2'
                  "
                  class="item"
                  effect="dark"
                  :content="scope.column.label + '(动作)'"
                  placement="top"
                >
                  <span> {{ scope.column.label }} (动作) </span>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <div v-if="scope.row[scope.column.property]">
                  {{ scope.row[scope.column.property].conditionDesc }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import { listGroupData } from "@/api/ruleConfig/groupinfo";
import { ruleGroupCompare } from "@/api/version/version";
import constant from "@/api/constant";
export default {
  data() {
    return {
      sourceTargetTables: [],
      sourceTables: [],
      targetTables: [],
      dbbb1:'',
      dbbb2:'',
      tableDatas:[],
      tableDatas2:[],
      conditionList:[],
      conditionList2:[],
      sourceCondition: [],
      targetCondition: [],
      groupType: "",
      groups: [],
      versions: [],
      searchParams: {
        groupIdentify: "",
        sourceVersion: "",
        targetVersion: "",
        groupType: "",
      },
      msg: "",
      activeName: [],
      redMap: {},
      soruceData: {},
      targetData: {},
    };
  },
  created() {
    this.getList();
  },
  // activated () {
  //   this.getList()
  // },
  mounted() {},
  methods: {
    getList() {
      this.groups = [];
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      listGroupData({})
        .then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          if (res.data.data) {
            let data = res.data.data;
            let arr = Object.keys(data);
            let arrvalue = Object.values(data);
            arrvalue.forEach((e, i) => {
              this.groups.push({ groupName: arr[i], groupIdentify: e });
            });
            // console.log(this.groups);
          }
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
    },

    compare() {
      this.msg = "";
      this.soruceData = {};
      this.targetData = {};
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      ruleGroupCompare(this.searchParams)
        .then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          if (res.data.data && res.data.resultCode == constant.SUCCESS) {
            let data = res.data.data;
            this.msg = data.msg;
            let result = data.result;
            let source = data.source.ruleSceneInfo;
            let target = data.target.ruleSceneInfo;
            this.tableDatas = data.source.body;
            this.conditionList = data.source.head;
            this.tableDatas2 = data.target.body;
            this.conditionList2 = data.target.head;
            this.dbbb1 = source.taskNo
            this.dbbb2 = target.taskNo
            let data1 = [];
            let data2 = [];
            result.forEach((e, i) => {
              if (i % 2 == 0) {
                data1.push(e);
              } else {
                data2.push(e);
              }
            });
            if (data1.length <= data2.length) {
              data2.forEach((e, i) => {
                this.sourceTargetTables.push({ source: data1[i], target: e });
              });
            } else {
              data1.forEach((e, i) => {
                this.sourceTargetTables.push({ source: e, target: data2[i] });
              });
            }
            // console.log(this.sourceTargetTables, "sourceTargetTables");
            // if (res.data.data.groupType === "1") {
            //   this.soruceData = res.data.data.source;
            //   this.targetData = res.data.data.target;

            //   this.soruceData.ruleInfoList.forEach((item) => {
            //     if (this.msg.indexOf(item.ruleInfo.ruleCode) !== -1) {
            //       this.redMap[item.ruleInfo.ruleCode] = true;
            //     }
            //   });
            //   this.targetData.ruleInfoList.forEach((item) => {
            //     if (this.msg.indexOf(item.ruleInfo.ruleCode) !== -1) {
            //       this.redMap[item.ruleInfo.ruleCode] = true;
            //     }
            //   });
            // }

            // if (res.data.data.groupType === "2") {
            //   this.sourceTables = res.data.data.source.body;
            //   this.targetTables = res.data.data.target.body;
            //   this.sourceCondition = res.data.data.source.head;
            //   this.targetCondition = res.data.data.target.head;
            // }
          }
        })
        .catch((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
    },
    changeHandle(value) {
      this.versions = [];
      listGroupData({ group_identify: value }).then(({ data }) => {
        // console.log(data);
        if (data.resultCode === 0) {
          data.data.forEach((e, i) => {
            this.versions.push({ label: e, value: e });
          });
        }
      });
    },
    handleChange(val) {},
  },
  watch: {},
  computed: {},
};
</script>

<style lang="less" scoped>
.table-title {
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  background-color: #f8f8f8;
}
.con-title {
  margin: 10px 0;
  text-align: center;
  line-height: 40px;
  background: #f8f8f8;
  p {
    font-size: 16px;
  }
}
.fillcontain {
  padding-bottom: 0;

  .fastQuery {
    padding: 15px 20px 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e1e1e1;

    .fastQuery_title {
      color: #666;
      padding: 6px 0px;
    }

    .fastQuery_item {
      margin: 0 10px;
    }

    .item_default {
      .el-button {
        color: #409eff !important;
        border-color: #c6e2ff !important;
        background-color: #ecf5ff !important;
      }
    }

    .moreCondition {
      color: #68a3fc;
      cursor: pointer;
      padding: 6px 0px;

      .el-icon-d-arrow-right {
        transform: rotate(90deg);
      }

      .el-icon-d-arrow-left {
        transform: rotate(-90deg);
      }
    }
  }
}

.contain {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
}

.pagination {
  padding: 10px 20px;
  text-align: right;
}

.operationIcon {
  // padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
  box-shadow: 0 0 3px #f9f9f9;

  .svg-icon {
    font-size: 14px;
    fill: #68a3fc;
  }
}

.search_container {
  padding: 20px 20px 0 20px;
}

.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.CodeMirror {
  border: 1px solid #eee;
  height: 1000px;
}
.text_center{
  text-align: center;
}
</style>



